<template>
  <div class="wrap">
<!--    <head-bar :pageInfo="pageInfo" />-->
    <div class="count-1">
      <div class="num num-l">社区总数<span>{{pageInfo.citynum}}</span>人</div>
      <div class="num num-r">老年人总数<span>{{pageInfo.oldnum}}</span>人</div>
    </div>
    <div class="map-wrap">
      <div class="cor cor-1"></div>
      <div class="cor cor-2"></div>
      <div class="cor cor-3"></div>
      <div class="cor cor-4"></div>

      <!--地图-->
      <map-home v-if="show" :map-data="pageInfo.mapdata" />
      <!--设备用户-->
      <div class="count">
        <div class="dt">设备用户</div>
        <div class="num">
          <div class="n" v-for="item in deviceNum" :key="item">{{item}}</div>
          <div class="t">人</div>
        </div>
      </div>
      <!--异常数据报告-->
      <div class="col col-1">
        <div class="sub-tit">{{pageInfo.exdata.name}}</div>
        <div class="con list">
          <div class="head">
            <div class="dl">
              <div class="addr">用户居住地址</div>
              <div class="tel"></div>
              <div class="status">警报等级</div>
            </div>
          </div>
          <div class="body">
            <div class="content" :style="{top}">
              <div class="dl" v-for="(item,index) in pageInfo.exdata.data" :key="index">
                <div class="addr">{{item.address}}</div>
                <div class="tel">电话：{{item.tel}}</div>
                <div :class="['status', 's' + item.level]">{{item.levelname}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--社区男女比例-->
      <div class="col col-2">
        <div class="sub-tit">{{pageInfo.chartsex.name}}</div>
        <div class="chart-1" id="sex"></div>
      </div>
      <!--慢性病分布-->
      <div class="col col-3">
        <div class="sub-tit">{{pageInfo.slowill.name}}</div>
        <div class="list">
          <div class="content" :style="slowillTop">
            <dl v-for="(item,index) in pageInfo.slowill.data" :key="index">
              <dt>{{item.name}}</dt>
              <dd>
                <div class="num">{{item.data}}</div>
                <div class="per" :style="{width: item.data}"></div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <!--设备用户数据-->
      <div class="col col-4">
        <div class="sub-tit">{{pageInfo.devicechart.name}}</div>
        <div class="chart-1" id="users1"></div>
        <div class="chart-2" id="users2"></div>
      </div>
      <!--异常数据处理-->
      <div class="col col-5">
        <div class="sub-tit">{{pageInfo.chartex.name}}</div>
        <div class="chart-1" id="abnormal"></div>
      </div>
      <!--各年龄段发生问题次数-->
      <div class="col col-6">
        <div class="sub-tit">{{pageInfo.chartage.name}}</div>
        <div class="chart-1" id="questions"></div>
      </div>
    </div>
  </div>
</template>

<script>
import MapHome from '@/components/MapHome'

export default {
  data () {
    return {
      map: null,
      dots: [],
      show: false,
      showMap: false,
      exActiveIndex: 0,
      exTiming: 2000,
      scrollTimer: null,
      slowillActiveIndex: 0,
      slowillTiming: 3000,
      pad: false,
      pageInfo: {
        'time': 3000,
        'nextrouter': 'xxxx',
        'prerouter': 'xxx',
        'weatherType': '1',
        'weartherContent': '晴转多云',
        'temperature': '26-27',
        'name': '西马桥智慧社区',
        'citynum': '3982',
        'oldnum': '1000',
        'devicenum': '896',
        'exdata': {
          'name': '异常数据报告',
          'data': [
            {
              'id': 1,
              'address': '丹凤小区2幢402老人',
              'tel': '13412341234',
              'level': 1,
              'levelname': '红色报警'
            },
            {
              'id': 2,
              'address': '丹凤小区2幢402老人',
              'tel': '13412341234',
              'level': 2,
              'levelname': '红色报警'
            },
            {
              'id': 3,
              'address': '丹凤小区2幢402老人',
              'tel': '13412341234',
              'level': 3,
              'levelname': '红色报警'
            },
            {
              'id': 4,
              'address': '丹凤小区2幢402老人',
              'tel': '13412341234',
              'level': 4,
              'levelname': '红色报警'
            },
            {
              'id': 5,
              'address': '丹凤小区2幢402老人',
              'tel': '13412341234',
              'level': 5,
              'levelname': '红色报警'
            }
          ]
        },
        'chartsex': {
          'name': '社区男女比例',
          'data': [
            {
              'value': 335,
              'name': '男'
            },
            {
              'value': 310,
              'name': '女'
            }
          ]
        },
        'slowill': {
          'name': '慢性病分布',
          'data': [
            {
              'name': '心脏病',
              'data': '75%'
            },
            {
              'name': '高血压',
              'data': '25%'
            },
            {
              'name': '冠心病',
              'data': '35%'
            },
            {
              'name': '高血糖',
              'data': '25%'
            },
            {
              'name': '冠心病',
              'data': '35%'
            },
            {
              'name': '高血脂',
              'data': '25%'
            }
          ]
        },
        'devicechart': {
          'name': '设备用户数据',
          'chartsex': {
            'name': '性别分布',
            'data': [
              {
                'value': 335,
                'name': '男性'
              },
              {
                'value': 310,
                'name': '女性'
              }
            ]
          },
          'chartage': {
            'name': '年龄分布',
            'data': [
              [
                '60-70岁',
                43.3,
                85.8
              ],
              [
                '70-80岁',
                83.1,
                73.4
              ],
              [
                '80-90岁',
                86.4,
                65.2
              ],
              [
                '90岁以上',
                72.4,
                53.9
              ]
            ]
          }
        },
        'chartex': {
          'name': '异常数据处理',
          'data': [
            {
              'name': '处理次数',
              'data': [
                { 'week': '周一', 'value': 120 },
                { 'week': '周二', 'value': 132 },
                { 'week': '周三', 'value': 101 },
                { 'week': '周四', 'value': 134 },
                { 'week': '周五', 'value': 90 },
                { 'week': '周六', 'value': 230 },
                { 'week': '周日', 'value': 210 }
              ]
            },
            {
              'name': '异常次数',
              'data': [
                { 'week': '周一', 'value': 220 },
                { 'week': '周二', 'value': 182 },
                { 'week': '周三', 'value': 191 },
                { 'week': '周四', 'value': 234 },
                { 'week': '周五', 'value': 290 },
                { 'week': '周六', 'value': 330 },
                { 'week': '周日', 'value': 310 }
              ]
            }
          ]
        },
        'chartage': {
          'name': '各年龄发生问题次数',
          'data': {
            'name': '问题统计',
            'ages': [
              '60-70岁',
              '70-80岁',
              '80-90岁',
              '90岁以上'
            ],
            'data': [
              150,
              300,
              200,
              180
            ]
          }
        },
        'mapdata': {
          'center': {
            'lat': 120.7428950071,
            'lng': 30.7819672895
          },
          'markers': [
            {
              'id': 1,
              'type': 1,
              'lat': 120.7412749529,
              'lng': 30.7824512001
            },
            {
              'id': 2,
              'type': 2,
              'lat': 120.7429164648,
              'lng': 30.7819765068
            },
            {
              'id': 3,
              'type': 3,
              'lat': 120.7431364059,
              'lng': 30.7806123268
            },
            {
              'id': 4,
              'type': 1,
              'lat': 120.7415699959,
              'lng': 30.7811838100
            }
          ]
        }
      }
    }
  },
  components: {
    MapHome
  },
  mounted () {
    const that = this
    /**
     * deviceType
     * pad 显示按钮控制
     * tv 不显示按钮控制
     */
    const deviceType = that.$route.query.deviceType
    that.pad = deviceType === 'pad'
    this.pageDataTimer = setInterval(async () => {
      that.getHomeInfo()
    }, that.pageInfo.time)
  },
  computed: {
    deviceNum () {
      return this.pageInfo.devicenum.split('')
    },
    top () {
      return -this.exActiveIndex * 27 + 'px'
    },
    slowillTop () {
      return { top: -this.slowillActiveIndex * 32 + 'px' }
    }
  },
  methods: {
    // 性别分布
    drawSex () {
      const that = this
      const sexData = that.pageInfo.chartsex.data.reverse().splice(',')
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('sex'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          formatter: function (name) {
            var data = sexData
            // console.log('name', data)
            var total = 0
            var tarValue
            for (var i = 0, l = data.length; i < l; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            var p = (tarValue / total * 100).toFixed(2)
            return name + ' ' + ' ' + '(' + p + '%)'
          },
          data: sexData.map(arr => {
            return arr.name
          }).reverse().splice(','),
          bottom: 10,
          padding: [1, 10],
          itemGap: 20,
          textStyle: {
            color: '#fff',
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        series: [
          {
            name: '性别分布',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: sexData
          }
        ],
        color: ['#d84e0b', '#0b5fd9']
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    // 设备用户数据1
    drawUsers1 () {
      const that = this
      const sexData = that.pageInfo.devicechart.chartsex.data.reverse().splice(',')
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('users1'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 20,
          bottom: 10,
          data: sexData.map(arr => {
            return arr.name
          }).reverse().splice(','),
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        series: [
          {
            name: that.pageInfo.devicechart.chartsex.name,
            type: 'pie',
            radius: '85%',
            center: ['50%', '50%'],
            data: sexData,
            // 标签
            label: {
              normal: {
                show: true,
                // position: 'inside',
                formatter: '{b}{d}%', // 模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                textStyle: {
                  align: 'center',
                  baseline: 'middle',
                  fontFamily: '微软雅黑',
                  fontSize: 15,
                  fontWeight: 'bolder'
                }
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#df5269', '#2192f2']
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    drawUsers2 () {
      const that = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('users2'))
      // 指定图表的配置项和数据
      let option = {
        dataset: {
          source: that.pageInfo.devicechart.chartage.data
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: ['#262f3f']
            }
          }
        },
        yAxis: {
          name: that.pageInfo.devicechart.chartage.name,
          axisLabel: {
            formatter: '{value}%'
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: ['#262f3f']
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              }
            }
          },
          {
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              }
            }
          }
        ],
        textStyle: {
          color: '#fff'
        },
        color: ['#2192f2', '#df5269'],
        grid: {
          y: 30,
          x2: 25,
          y2: 30,
          borderWidth: 10
        }
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    drawAbnormal () {
      const that = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('abnormal'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: that.pageInfo.chartex.data.map(arr => {
            return arr.name
          }),
          orient: 'horizontal',
          right: 10,
          top: 40,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        textStyle: {
          color: '#fff'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.pageInfo.chartex.data[0].data.map(arr => {
            return arr.week
          }),
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: ['red'],
          //     width: 1,
          //     type: 'solid'
          //   }
          // },
          axisLine: {
            lineStyle: {
              color: ['#262f3f']
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '次数',
          splitLine: {
            show: false,
            lineStyle: {
              color: ['blue'],
              width: 1,
              type: 'solid'
            }
          },
          axisLine: {
            lineStyle: {
              color: ['#262f3f']
            }
          }
        },
        series: that.pageInfo.chartex.data.map(arr => {
          return {
            type: 'line',
            stack: '总量',
            name: arr.name,
            data: arr.data.map(a => {
              return a.value
            })
          }
        }),
        // series: [
        //   {
        //     name: '异常次数',
        //     type: 'line',
        //     stack: '总量',
        //     data: [220, 182, 191, 234, 290, 330, 310]
        //   },
        //   {
        //     name: '处理次数',
        //     type: 'line',
        //     stack: '总量',
        //     data: [120, 132, 101, 134, 90, 230, 210]
        //   }
        // ],
        color: ['#0b5fd9', '#d84e0b']
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    drawQuestions () {
      const that = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('questions'))
      // 指定图表的配置项和数据
      let option = {
        color: ['#f45e23'],
        tooltip: {
          trigger: 'axis'
        },
        textStyle: {
          color: '#fff'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.pageInfo.chartage.data.ages,
          axisLine: {
            lineStyle: {
              color: ['#262f3f']
            }
          }
        },
        yAxis: {
          name: '次数',
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: ['#262f3f']
            }
          }
        },

        series: [
          {
            name: that.pageInfo.chartage.data.name,
            type: 'line',
            data: that.pageInfo.chartage.data.data,
            markPoint: {
              data: [
                {
                  name: '最低',
                  value: Math.min(...that.pageInfo.chartage.data.data),
                  xAxis: that.pageInfo.chartage.data.data.indexOf(Math.min(...that.pageInfo.chartage.data.data)),
                  yAxis: Math.min(...that.pageInfo.chartage.data.data)
                },
                {
                  name: '最高',
                  value: Math.max(...that.pageInfo.chartage.data.data),
                  xAxis: that.pageInfo.chartage.data.data.indexOf(Math.max(...that.pageInfo.chartage.data.data)),
                  yAxis: Math.max(...that.pageInfo.chartage.data.data)
                }
              ]
            }
            // markLine: {
            //   data: [
            //     { type: 'average', name: '平均值' },
            //     [{
            //       symbol: 'none',
            //       x: '90%',
            //       yAxis: 'max'
            //     }, {
            //       symbol: 'circle',
            //       label: {
            //         normal: {
            //           position: 'start',
            //           formatter: '最大值'
            //         }
            //       },
            //       type: 'max',
            //       name: '最高点'
            //     }]
            //   ]
            // }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    async scroll () {
      const that = this
      // console.log('123:', new Date())
      if (that.exActiveIndex < this.pageInfo.exdata.data.length - 5) {
        that.exActiveIndex++
      } else {
        that.exActiveIndex = 0
      }

      if (that.slowillActiveIndex < this.pageInfo.slowill.data.length - 5) {
        that.slowillActiveIndex++
      } else {
        that.slowillActiveIndex = 0
      }

      that.scrollTimer = await setTimeout(() => {
        that.scroll()
      }, that.exTiming)

      clearTimeout(that.scrollTimer)

      // console.log('that.exActiveIndex', that.exActiveIndex, new Date(), that.exTiming, that.scrollTimer)
    },
    async getHomeInfo () {
      const that = this
      const params = {
        id: that.$route.query.id,
        'from': that.$route.query.deviceType,
        curRouter: 'home'
      }
      await that.$store.dispatch('getHome', params)
      that.pageInfo = that.$store.state.pagehome

      that.show = true
      // console.log(that.show)

      that.drawSex()
      that.drawUsers1()
      that.drawUsers2()
      that.drawAbnormal()
      that.drawQuestions()
      that.scroll()
    }
  }
}
</script>
<style lang="scss" scoped>
  .wrap {
    background: url('../assets/images/main-bg.jpg') no-repeat center center;
  }
  .count-1 {
    $h: 75px;
    position: absolute;
    width: 927px;
    height: $h;
    background: url('../assets/images/num-bg.png') no-repeat center center;
    left: 50%;
    margin-left: -413px;
    top: 89px;
    .num {
      height: $h;
      line-height: $h;
      position: absolute;
      font-size: $fz4;
      color: darken($c2, 5%);
      font-weight: bold;
      span {
        color: $c1;
        padding: 0 8px;
      }
      &-l {
        left: 166px;
      }
      &-r {
        right: 166px;
        text-align: right;
      }
    }
  }
  .map-wrap {
    .count {
      text-align: center;
      position: relative;
      z-index: 1000;
      .dt {
        height: 44px;
        line-height: 44px;
        font-size: 18px;
        color: #6e7a83;
        position: relative;
      }
      .num {
        position: relative;
        display: inline-block;
        .n {
          width: 47px;
          height: 69px;
          background: url('../assets/images/h-num-bg.png') no-repeat center center;
          line-height: 69px;
          text-align: center;
          font-size: $fz5*2;
          display: inline-block;
          margin: 0 4px;
        }
        .t {
          position: absolute;
          right: -30px;
          bottom: 0;
          font-size: $fz4;
        }
      }
    }
    .col {
      /*border: 1px solid #5297a5;*/
      position: absolute;
      z-index: 1000;
      .sub-tit {
        position: absolute;
        width: 100%;
        left: 0;
        top: 10px;
        background: url('../assets/images/h-tit1-bg.png') no-repeat center top;
        height: 47px;
        line-height: 47px;
        font-size: 22px;
        font-weight: bold;
        color: $c1;
        text-align: center;
      }
      &-1 {
        width: 473px;
        height: 255px;
        background: url('../assets/images/h-col1-bg.png') no-repeat center top;
        font-size: 14px;
        color: #c3cad9;
        top: 57px;
        left: 24px;
        .con {
          margin: 73px 10px 0;
          border: 1px solid #202734;
          $h: 26px;
          .head {
            height: $h;
            line-height: $h;
            margin-bottom: 5px;
            background-color: rgba(255, 255, 255, .05);
          }
          .body {
            height: $h * 5;
            overflow: hidden;
            .content {
              position: relative;
              transition: top 0.5s;
            }
          }
          .dl {
            @include clearfix();
            border-bottom: 1px solid #202734;
            height: $h;
            overflow: hidden;
            .addr, .tel, .status {
              @include fl();
              height: $h;
              line-height: $h;
              @include ell();
            }
            .addr {
              padding-left: 10px;
              width: 150px;
            }
            .tel {
              width: 150px;
            }
            .status {
              text-align: right;
              @include fr();
              margin-right: 10px;
              $c3: #ff000c;
              $c5: #ffde00;
              $c4: #ff722c; /*色块背景色*/
              $c6: #00c205;
              &.s1 {
                color: $c3;
              }
              &.s2 {
                color: $c4;
              }
              &.s3 {
                color: $c5;
              }
              &.s4 {
                color: $c6;
              }
            }
          }
        }
      }
      &-2 {
        width: 473px;
        height: 263px;
        top: 330px;
        left: 24px;
        background: url('../assets/images/h-col2-bg.png') no-repeat center top;
        .chart-1 {
          width: 100%;
          height: 100%;
          //@include bgCol();
        }
      }
      &-3 {
        width: 473px;
        height: 255px;
        background: url('../assets/images/h-col1-bg.png') no-repeat center top;
        left: 24px;
        bottom: 24px;
        //@include bgCol();
        .list {
          $h: 20px;
          $bor-w: 1px;
          $mb: 10px;
          $dt-w: 70px;
          $dd-w: 320px;
          $dt-r: 10px;
          width: $dt-w + $dt-r + $dd-w + $bor-w * 2;
          height: ($h + $bor-w * 2 + $mb) * 5;
          overflow: hidden;
          margin: 80px auto 0;
          .content {
            position: relative;
            transition: top 0.5s;
          }
          dl {
            margin-bottom: $mb;
            @include clearfix();
            dt, dd {
              @include fl();
              display: inline-block;
            }
            dt {
              width: $dt-w;
              margin-right: $dt-r;
              @include ell();
              height: $h + $bor-w * 2;
              line-height: $h + $bor-w * 2;
              color: #d9efff;
            }
            dd {
              position: relative;
              height: $h;
              line-height: $h;
              border: $bor-w solid $c1;
              width: 310px;
              .num, .per {
                width: 100%;
                height: 100%;
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
              }
              .num {
                z-index: 2;
                color: #d9efff;
              }
              .per {
                background-color: #989898;
              }
            }
          }
        }
      }
      &-4 {
        width: 834px;
        height: 254px;
        background: url('../assets/images/h-col4-bg.png') no-repeat center center;
        left: 524px;
        bottom: 24px;
        //@include bgCol();
        .chart-1 {
          position: absolute;
          width: 420px;
          height: 190px;
          left: 0;
          bottom: 0;
        }
        .chart-2 {
          position: absolute;
          width: 420px;
          height: 190px;
          right: 0;
          bottom: 0;
        }
      }
      &-5 {
        width: 473px;
        height: 293px;
        top: 57px;
        right: 24px;
        background: url('../assets/images/h-col5-bg.png') no-repeat center top;
        .chart-1 {
          position: relative;
          top: 30px;
          width: 457px;
          height: 251px;
        }
      }
      &-6 {
        width: 473px;
        height: 410px;
        bottom: 24px;
        right: 24px;
        background: url('../assets/images/h-col6-bg.png') no-repeat center top;
        .chart-1 {
          position: relative;
          top: 70px;
          width: 457px;
          height: 357px;
        }
      }
    }
  }
</style>
